<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="../js/element-ui-2.13.0/lib/theme-chalk/index.css">
    <style>
        #whole{
            margin: 0 auto;
            border: 1px solid #a0e274;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center;/*实现水平居中*/
            align-items:center; /*实现垂直居中*/
            top: 50%;
            left: 50%;
            position: absolute;
            margin: -250px 0 0 -250px;
            background:#a0e274;
        }
        body{
            background:#a0e274;
        }
    </style>
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui-2.13.0/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="whole">
        <div>
            <el-input class="box" placeholder="请输入真实姓名" v-model="ruleForm.realName" maxlength="8" clearable>
                <template slot="prepend">姓&nbsp;&nbsp;&nbsp;名</template>
            </el-input>
            <br><br>
            <i class="el-icon-user-solid"></i>(性别)
            &nbsp;&nbsp;&nbsp;
            <el-radio-group v-model="ruleForm.sex" size="medium">
                <el-radio-button label="男"></el-radio-button>
                <el-radio-button label="女"></el-radio-button>
            </el-radio-group>
            <br><br>
            <i class="el-icon-present"></i>(生日)
            &nbsp;&nbsp;&nbsp;
            <el-date-picker v-model="ruleForm.birthday" type="date" placeholder="选择日期">
            </el-date-picker>
            <br><br>
            <el-input class="box" placeholder="请输入用户名" v-model="ruleForm.username" maxlength="12" clearable>
                <template slot="prepend">用户名</template>
            </el-input>
            <br><br>
            <el-input class="box" placeholder="请输入密码" v-model="ruleForm.password" maxlength="12" show-password>
                <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
            </el-input>
            <br><br>
            <el-button style="width: 330px" class="box" type="primary" @click="register">注册</el-button>
        </div>
    </div>
</body>
<script>
    const app = new Vue({
        el: '#whole',
        data:{
            ruleForm: {
                username: "",
                password: "",
                realName: "",
                sex: "",
                birthday: ""
            }
        },
        methods:{
            register(){
                if (this.ruleForm.username === ""){
                    this.$message.warning("用户名不能为空！");
                    return;
                }
                if (this.ruleForm.password === ""){
                    this.$message.warning("密码不能为空！");
                    return;
                }
                axios.post('https://3723r72n06.picp.vip/mylife/user/register',this.ruleForm,{headers: {'conTent-Type': 'application/json'}}).then(response=>{
                    if(response.data.code==200){
                        this.$message.success(response.data.msg);
                        setTimeout(() => {
                            location.href="../login/login.html";
                        }, 1000);
                    }else if(response.data.code==1001){
                        this.$message.warning(response.data.msg);
                    }
                });
            }
        }
    });
</script>
</html>